<template>
    <div class="container">
        <!-- 顶部用户信息区域 -->
        <div class="user-info">
            <div class="user-profile">
                <van-icon name="contact" size="48" />
                <div class="user-details">
                    <span class="user-name">{{ store.currentUser.name }}</span>
                    <div class="user-phone">18****7200</div>
                </div>
            </div>
            <div class="notification-icon">
                <van-badge :value="1" is-dot>
                    <van-icon name="bell-o" />
                </van-badge>
            </div>
        </div>
        <!-- 设置选项区域 -->
        <van-cell-group>
            <van-cell title="设置" arrow="right" @click="goToSettings" />
        </van-cell-group>
        <!-- 退出登录按钮区域 -->
        <div class="logout-button">
            <van-button type="danger" @click="go()">退出登录</van-button>
        </div>
        <!-- 底部导航栏 -->
        <van-tabbar>
            <van-tabbar-item v-for="(item, index) in footerItems" :key="index" :icon="item.icon" :name="item.name"
                :active-icon="item.activeIcon" :color="item.color" @click="goTo(item.path)">
                {{ item.label }}
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from "vue-router";
import { useCounterStore } from "@/stores/counter";

const store = useCounterStore();


// 底部导航栏配置
const footerItems = ref([
    { icon: 'home-o', activeIcon: 'home', name: 'home', label: '首页', path: '/Mainpage', color: '#333' },
    { icon: 'message-o', activeIcon: 'message', name: 'message', label: '消息', path: '/messages', color: '#333' },
    { icon: 'user-o', activeIcon: 'user', name: 'user', label: '我的', path: '/Myinfo', color: 'blue' }
]);

// 前往设置页面函数
const goToSettings = () => {
    console.log('前往设置页面');
    // 这里可添加实际的路由跳转逻辑
};
const router = useRouter();
// 退出登录函数
const go = () => {
    router.push("/");
};

// 底部导航栏点击跳转函数
const goTo = (path) => {
    router.push(path); // 使用router.push实现实际的路由跳转
    console.log(`跳转到${path}`);
};
</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.user-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ecf5ff;
    padding: 20px;
}

.user-profile {
    display: flex;
    align-items: center;
}

.user-details {
    margin-left: 10px;
}

.user-name {
    font-size: 16px;
    font-weight: bold;
}

.user-phone {
    font-size: 14px;
    color: #666;
}

.notification-icon {
    display: flex;
    align-items: center;
}

.logout-button {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
</style>